<template>
	<div>
		<el-card shadow="never" :body-style="{ padding: '20px' }">
			<el-form inline label-position="left" class="form" size="normal">
				<el-form-item class="formItem">
					<el-input class="searchInput" v-model="searchInput">
						<template #prefix>
							<el-icon class="el-input__icon"><search /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item class="formItem" size="normal">
					<el-button
						color="#f5f7f9"
						size="large"
						class="searchButton"
						@click=""
						>搜索</el-button
					>
				</el-form-item>
				<el-form-item class="formItem" label="资源类型:" size="normal">
					<el-select v-model="optionsValue" class="m-2" size="normal">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item class="formItem" label="状态:" size="normal">
					<el-select
						v-model="stateValue"
						class="m-2"
						placeholder="全部"
						size="normal"
					>
						<el-option
							v-for="item in stateData"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<el-table
				:header-cell-style="{ background: '#f5f7f9' }"
				:data="tableData"
				style="width: 100%; margin-top: 10px"
				empty-text="无更多内容"
			>
				<el-table-column
					align="center"
					prop="date"
					label="内容"
					width="410"
				/>
				<el-table-column
					align="center"
					prop="name"
					label="发布时间"
					width="150"
				/>
				<el-table-column align="center" prop="address" label="数据" />
				<el-table-column align="center" prop="address" label="状态" />
				<el-table-column align="center" prop="address" label="操作" />
			</el-table>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { Calendar, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
let searchInput = ref('')
// 资源类型
const options = [
	{
		value: 'options1',
		label: '作品',
	},
	{
		value: 'options2',
		label: '教程',
	},
	{
		value: 'options3',
		label: '动态',
	},
	{
		value: 'options4',
		label: '专题',
	},
]
const optionsValue = ref('')

//状态
const stateData = [
	{
		value: 'state1',
		label: '已发布',
	},
	{
		value: 'state2',
		label: '未发布',
	},
	{
		value: 'state3',
		label: '审核中',
	},
	{
		value: 'state4',
		label: '审核未通过',
	},
	{
		value: 'state5',
		label: '仅主页可见',
	},
]
const stateValue = ref('')
</script>

<style scoped>
>>> .searchInput {
	height: 40px;
	width: 270px;
	background: #f5f7f9;
}
>>> .form {
	margin: 0;
	display: flex;
}
>>> .formItem {
	margin: 0 5px;
	font-size: 25px;
}
</style>
